/**
 * @Date 2023-02-24 13:46:57
 * @Remark
 */

// react
import React, { useEffect, useState } from "react";
// lib
import { Modal, Form, Input, Select, InputNumber } from "antd";
// components & widget
// config
import { MODULE_NAME } from "./config";
import { MODAL_STYLE } from "project/config";
import { INPUT_REQUIRED_RULE } from "project/validRules";
// store
import { observer } from "mobx-react";
import { state } from "./state";
// controller
import {
  addShelf,
  // getProShelfLongPage,
  updateShelf,
} from "./controller";
import { MIN_MAX_RULE } from "utils/validator";
const { Option } = Select;
function EditModal() {
  const [form] = Form.useForm();
  const show = state.editModalShow;
  const info = state.editInfo;
  const title = `${state.editInfo ? "编辑" : "新增"}${MODULE_NAME}`;

  const handleCancel = () => {
    state.editModal = false;
  };

  const handleOk = async () => {
    const result = await form.validateFields();
    if (info) {
      updateShelf(result, info.shelfId);
    } else {
      addShelf(result);
    }
  };

  useEffect(() => {
    if (show) {
      form.resetFields();
      // getProShelfLongPage();
    }
    if (info) {
      form.setFieldsValue({
        ...info,
      });
    }
    return () => {
      form.resetFields();
    };
  }, [form, show, info]);
  const onChange = () => {

  }
  return (
    <Modal
      title={title}
      open={show}
      onCancel={handleCancel}
      onOk={handleOk}
      destroyOnClose
      maskClosable
      forceRender
      okButtonProps={{
        loading: state.editModalLoading,
      }}
    >
      <Form {...MODAL_STYLE.FORM_6_15} form={form}>

        <Form.Item name="shelfName" label="书架名称" rules={[INPUT_REQUIRED_RULE, MIN_MAX_RULE(1, 50)]}>
          <Input />
        </Form.Item>
        <Form.Item name="maxLevel" label="书架层数" rules={[INPUT_REQUIRED_RULE]} >
          <InputNumber />
        </Form.Item>
        <Form.Item name="shelfLocation" label="房间位置" rules={[INPUT_REQUIRED_RULE]}>
          <Select onChange={onChange}>
            {state.longList.map((el) => (
              <Option key={el.roomId} value={el.roomId}>
                {el.roomName}-{el.roomLocation}
              </Option>
            ))}
          </Select>
        </Form.Item>

      </Form>
    </Modal>
  );
}

export default observer(EditModal);
